<template>
  <a-drawer title="新增招新" :width="450" :visible="visible" :body-style="{ paddingBottom: '80px' }" @close="onClose">
    <a-form :model="form" layout="vertical">
      <a-form-item label="图标：" name="icon_path">
        <div class="wrap" @click="openAddIcon">
          <img v-if="form.icon_path" :src="imgurl" alt="avatar" style="width: 100%" />
          <div v-else class="plus-icon">
            <loading-outlined v-if="loading"></loading-outlined>
            <plus-outlined v-else color="#999"></plus-outlined>
          </div>
        </div>
      </a-form-item>
      <a-form-item label="标题：" name="title">
        <a-input v-model:value="form.title" placeholder="请输入招新标题" autocomplete="off" />
      </a-form-item>

      <a-form-item label="结束时间：" name="end_time">
        <a-date-picker v-model:value="form.end_time" placeholder="请选择结束时间" />
      </a-form-item>

      <a-form-item label="状态：" name="status">
        <a-select ref="select" style="width: 120px" placeholder="请选择状态" v-model:value="form.status">
          <a-select-option :value="0">未开始</a-select-option>
          <a-select-option :value="1">可报名</a-select-option>
          <a-select-option :value="2">停止报名</a-select-option>
          <a-select-option :value="3">已结束</a-select-option>
          <a-select-option :value="4">不显示</a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item label="流程：" name="process_id">
        <a-space size="middle">
          <a-button @click="openChooseProcess">选择流程</a-button>
          你选择了：《{{ chooseProcessItem }}》
        </a-space>
        <choose-process-event ref="RefChooseProcess" @chosItem="getProcessItem" />
      </a-form-item>

      <a-form-item label="问卷：" name="paper_id">
        <a-space size="middle">
          <a-button @click="openChoosePaper">选择报名问卷</a-button>
          你选择了：《{{ choosePaperItem }}》
        </a-space>
        <choose-paper-event ref="RefChoosePaper" @chosTitle="getPaperItem" />
      </a-form-item>

      <a-form-item label="介绍：" name="introduction">
        <a-textarea v-model:value="form.introduction" placeholder="请输入招新介绍" :rows="5" />
      </a-form-item>
    </a-form>
    <a-row type="flex" justify="end">
      <a-space size="middle">
        <a-button @click="onClose">取消</a-button>
        <a-button type="primary" @click="plusAdmin">添加</a-button>
      </a-space>
      <update-icon ref="RefAddIcon" @chosIcon="getchosIcon" />
    </a-row>
  </a-drawer>
</template>

<script lang="ts">
import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue'
import { defineComponent, reactive, ref, toRaw, Ref } from 'vue'
import { message } from 'ant-design-vue'
import 'ant-design-vue/es/message/style/css'
import UpdateIcon from '../../../components/recruitment/UpdateIcon.vue'
import ChoosePaperEvent from '../../../components/chooseDetail/ChoosePaperEvent.vue'
import ChooseProcessEvent from '../../../components/chooseDetail/ChooseProcessEvent.vue'
import { post } from '../../../utils/request/request'

interface FormState {
  title: string
  introduction: string
  status: number
  icon_path: string
  process_id: number | undefined
  paper_id: number | undefined
  end_time: string
}

interface IconItem {
  url: string
  path: string
}

interface ProcessItem {
  id: number
  name: string
}

interface PaperItem {
  id: number | undefined
  title: string
  start_time: string
  end_time: string
  status: number | undefined
  count: number | undefined
  create_by: string
  create_time: string
}

const form: FormState = reactive({
  title: '',
  introduction: '',
  status: 0,
  icon_path: '',
  process_id: undefined,
  paper_id: undefined,
  end_time: ''
})

const loading = ref<boolean>(false)

// 子组件相关逻辑
const useChildEffect = () => {
  //图标
  const RefAddIcon = ref()
  const imgurl = ref<string>('')
  const openAddIcon = () => {
    RefAddIcon.value.showDrawer()
  }
  const getchosIcon = (img: Ref<IconItem>) => {
    form.icon_path = img.value.path
    imgurl.value = img.value.url
  }
  //流程
  const RefChooseProcess = ref()
  const chooseProcessItem = ref<string>('')
  const openChooseProcess = () => {
    RefChooseProcess.value.showModal()
  }
  const getProcessItem = (processItem: ProcessItem) => {
    chooseProcessItem.value = processItem.name
    form.process_id = processItem.id
  }
  // 问卷
  const RefChoosePaper = ref()
  const choosePaperItem = ref<string>('')
  const openChoosePaper = () => {
    RefChoosePaper.value.showModal()
  }
  const getPaperItem = (paperItem: PaperItem) => {
    choosePaperItem.value = paperItem.title
    form.paper_id = paperItem.id
  }
  return {
    RefAddIcon,
    imgurl,
    openAddIcon,
    getchosIcon,
    RefChooseProcess,
    openChooseProcess,
    getProcessItem,
    chooseProcessItem,
    RefChoosePaper,
    choosePaperItem,
    openChoosePaper,
    getPaperItem
  }
}

// drawer相关
const useDrawerEffect = (emit: any) => {
  const visible = ref<boolean>(false)
  const { postData } = useHttpRequestEffect(emit, visible)
  const showDrawer = () => {
    visible.value = true
  }
  const onClose = () => {
    visible.value = false
  }
  const plusAdmin = () => {
    if (!form.title) {
      message.info('标题没填！')
      return
    }
    if (!form.end_time) {
      message.info('结束时间没填！')
      return
    }
    if (!form.introduction) {
      message.info('介绍没填！')
      return
    }
    if (!form.icon_path) {
      message.info('图标没有选')
      return
    }
    if (!form.process_id) {
      message.info('流程还没选！')
      return
    }
    if (!form.paper_id) {
      message.info('问卷还没选！')
      return
    }
    postData().then(() => {
      visible.value = false
    })
  }
  return { visible, showDrawer, onClose, plusAdmin }
}

// 网络请求
const useHttpRequestEffect = (emit: any, visible: Ref<boolean>) => {
  const token: string = localStorage.getItem('token') as string
  const postData = async () => {
    const res: any = await post('/admin/api/v1/recruitment', toRaw(form), token)
    console.log(res)
    if (res.status_code === 0) {
      message.success('添加成功')
      emit('getData')
      visible.value = false
    } else {
      message.error('添加失败')
    }
  }
  return { postData }
}

export default defineComponent({
  emits: ['getData'],
  components: {
    UpdateIcon,
    LoadingOutlined,
    PlusOutlined,
    ChoosePaperEvent,
    ChooseProcessEvent
  },
  setup(props, { emit }) {
    const { RefAddIcon, imgurl, openAddIcon, getchosIcon, RefChooseProcess, openChooseProcess, getProcessItem, chooseProcessItem, RefChoosePaper, choosePaperItem, openChoosePaper, getPaperItem } =
      useChildEffect()
    const { visible, showDrawer, onClose, plusAdmin } = useDrawerEffect(emit)

    return {
      form,
      loading,
      RefAddIcon,
      imgurl,
      openAddIcon,
      getchosIcon,
      RefChooseProcess,
      openChooseProcess,
      getProcessItem,
      chooseProcessItem,
      RefChoosePaper,
      choosePaperItem,
      openChoosePaper,
      getPaperItem,
      visible,
      showDrawer,
      plusAdmin,
      onClose
    }
  }
})
</script>

<style lang="less" scoped>
.wrap {
  width: 100px;
  height: 100px;
}
.plus-icon {
  width: 100px;
  height: 100px;
  border: 1px dashed #999;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}
</style>
